<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>overscroll-behavior-x demo</title>
    <style>
      main {
        height: 500px;
        width: 3000px;
        background-color: magenta;
        background-image: repeating-linear-gradient(
          to right,
          rgb(0 0 0 /  0) 0px,
          rgb(0 0 0 /  0) 19px,
          rgb(0 0 0 / 0.5) 20px
        );
      }

      main > div {
        height: 300px;
        width: 500px;
        overflow: auto;
        position: relative;
        top: 100px;
        left: 100px;
        overscroll-behavior-x: contain;
      }

      div > div {
        height: 100%;
        width: 1500px;
        background-color: yellow;
        background-image: repeating-linear-gradient(
          to right,
          rgb(0 0 0 /  0) 0px,
          rgb(0 0 0 /  0) 19px,
          rgb(0 0 0 / 0.5) 20px
        );
      }

      p {
        padding: 10px;
        background-color: rgb(255 0 0 / 0.5);
        margin: 0;
        width: 300px;
        position: relative;
        top: 10px;
        left: 10px;
      }
    </style>
  </head>
  <body>
    <h1>overscroll-behavior-x demo</h1>
    <main>
      <div>
        <div>
          <p>
            <code>overscroll-behavior-x</code> has been used to make it so that
            when the scroll boundaries of the inner box are reached, the whole
            page does not begin to scroll.
          </p>
        </div>
      </div>
    </main>
  </body>
</html>
